<template>
	<view class="charging">
		<view class="preloader">
			<view v-if="data.code === '3'" class="finshed"></view>
			<view v-else-if="data.code === '1'" class="warning"></view>
			<view v-else class="charged"></view>
		</view>
		<view class="circle">
			<view v-if="data.code === '3'">
				<view class="power">充电已结束</view>
				<image class="elect" src="https://carching.cd1a.cn/images/mini_program/elect.png"></image>
				<view style="color:#403f3f;">请及时结束充电</view>
			</view>
			<view v-else-if="data.code === '1'">
				<view class="power">充电故障</view>
				<image class="warn" src="https://carching.cd1a.cn/images/mini_program/warning.png"></image>
				<view style="color:#403f3f; font-size: 25rpx;">请停止充电并联系客服</view>
			</view>
			<view v-else>
				<view class="power">已充电量</view>
				<view class="cash">{{ data.sum_electric ? data.sum_electric : "0.00" }}</view>
				<view style="color:#353535">kWh</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["data"]
	}
</script>

<style scoped>
	
	.circle {
		border-radius: 50%;
		width: 438rpx;
		height: 443rpx;
		background-image: linear-gradient(#282121, #837F7F);
		position: absolute;
		top: 68rpx;
		left: 21%;
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}
	
	.elect {
		width: 110rpx;
		height: 190rpx;
		margin: 20rpx 0;
	}
	
	.warn {
		width: 250rpx;
		height: 220rpx;
		margin: 5rpx 0;
	}
	
	.power {
		color: #FFFFFF;
		letter-spacing: 1px;
	}
	
	.cash {
		color: #FFFFFF;
		font-size: 100rpx;
		margin: 20rpx 0;
		letter-spacing: 1px;
	}
	
	.preloader {
	  position: absolute;
	  width: 480rpx;
	  height: 0%;
	  padding-bottom: 480rpx;
	  left: 50%;
	  top: 290rpx;
	  transform: translateX(-50%) translateY(-50%);
	}
	.charged,
	.finshed,
	.warning {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 50%;
	  transform: translateX(-50%) translateY(-50%);
	  animation: animatePreloader 1s infinite linear;
	  transform-origin: 50% 100%;
	}
	.charged::before {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 50%;
	  top: 50%;
	  transform: translateX(-50%);
	  border-radius: 50%;
	  background-image: linear-gradient(135deg, #0da294, #55ed99);
	  border-radius: 50%;
	  box-sizing: border-box;
	  box-shadow: 5rpx 5rpx 70rpx #107665;
	}
	.finshed::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		background-image: linear-gradient(135deg, #93F9DE, #4BA2FF);
		border-radius: 50%;
		box-sizing: border-box;
		box-shadow: 5rpx 5rpx 70rpx #169B85;
	}
	.warning::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		left: 50%;
		top: 50%;
		transform: translateX(-50%);
		border-radius: 50%;
		background-image: linear-gradient(135deg, #FD5E88, #FF365D);
		border-radius: 50%;
		box-sizing: border-box;
		box-shadow: 5rpx 5rpx 70rpx #FF5661;
	}
	@keyframes animatePreloader {
	    0% {
	        transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
	    }
	    100% {
	        transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
	    }
	}
</style>
